﻿@page "/buttons/progress-button"

@using Syncfusion.Blazor.SplitButtons

@inherits SampleBaseComponent

<SampleDescription>
   <p>This sample demonstrates the default functionalities of a ProgressButton component. Clicking that button will display a spinner and a progress indicator.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>ProgressButton</code> visualizes the progression of an operation to indicates the user that a process is happening in the background. The progress can be shown with graphics accompanied by a textual representation.</p>
    <p>In this sample, the ProgressButton contains the content, spinner, progress indicator, and a list of related features that can be achieved using
        <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfProgressButton~Content.html">Content</a>,
        <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfProgressButton~CssClass.html">CssClass</a> and
        <a target = ""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfProgressButton~EnableProgress.html">EnableProgress</a> property.
    </p>
    <p>More information about Blazor ProgressButton component can be found in this <a target = ""_blank"" href="https://blazor.syncfusion.com/documentation/progress-button/getting-started/">documentation section</a>.</p>
</ActionDescription>


<div class="control-section">
    <div class="progress-button-section">
        <div id="progress-button-control">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Spin Left" IsPrimary="true"></SfProgressButton>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Spin Right" IsPrimary="true">
                            <ProgressButtonSpinSettings Position="SpinPosition.Right"></ProgressButtonSpinSettings>
                        </SfProgressButton>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Spin Top" IsPrimary="true">
                            <ProgressButtonSpinSettings Position="SpinPosition.Top"></ProgressButtonSpinSettings>
                        </SfProgressButton>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Spin Bottom" IsPrimary="true">
                            <ProgressButtonSpinSettings Position="SpinPosition.Bottom"></ProgressButtonSpinSettings>
                        </SfProgressButton>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton CssClass="e-round e-small e-success" IconCss="e-btn-sb-icons e-play-icon">
                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
                            <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.ZoomOut"></ProgressButtonAnimationSettings> 
                        </SfProgressButton>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton ID="contract" Content="Contract" EnableProgress="true" CssClass="@cssClass">
                            <ProgressButtonEvents OnBegin="contractBegin" OnEnd="contractEnd"></ProgressButtonEvents>
                        </SfProgressButton>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Slide Left" EnableProgress="true" CssClass="e-flat e-success">
                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
                            <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.SlideLeft"></ProgressButtonAnimationSettings>
                        </SfProgressButton>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Slide Right" EnableProgress="true" CssClass="e-outline e-success">
                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
                            <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.SlideRight"></ProgressButtonAnimationSettings>
                        </SfProgressButton>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Zoom In" EnableProgress="true" CssClass="e-round-corner e-danger">
                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
                            <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.ZoomIn"></ProgressButtonAnimationSettings>
                        </SfProgressButton>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton ID="roundbtn" Content="Zoom Out" EnableProgress="true" CssClass="e-small e-danger">
                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
                            <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.ZoomOut"></ProgressButtonAnimationSettings>
                        </SfProgressButton>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Download" EnableProgress="true" Duration=4000 CssClass="e-hide-spinner e-progress-top"
                                           IconCss="e-btn-sb-icons e-download-icon"></SfProgressButton>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                        <SfProgressButton Content="Disabled" Disabled="true"></SfProgressButton>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>

    #progress-button-control {
        width: 100%;
        margin: 8% 0;
        text-align: center;
    }

    @@media only screen and (max-width: 500px) {
        #progress-button-control {
            margin-left: -11%;
        }
    }

    .progress-button-section {
        width: 80%;
        margin: auto;
    }

    #progress-button-control .col-xs-12 {
        margin: 18px 0;
    }

    #contract.e-progress-active .e-btn-content {
        display: none;
    }

    #contract {
        transition: all .3s cubic-bezier(.175, .885, .32, 1) 100ms;
    }

    @@font-face {
        font-family: 'button-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-btn-sb-icons {
        font-family: 'button-icons';
        line-height: 1;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .e-play-icon::before {
        content: '\e701';
        font-size: 12px;
    }

    .e-bigger .e-play-icon::before {
        font-size: 14px;
    }

    .e-download-icon::before {
        content: '\e702';
    }

    .e-round .e-play-icon {
        margin-top: -2px;
    }

    .bootstrap4 .e-round .e-play-icon {
        margin-top: 0;
        margin-left: 2px;
    }

    .material .e-round .e-play-icon {
        margin-top: 0;
    }
</style>

@code{
    private string cssClass = "e-success e-small";

    private void contractBegin(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        cssClass = "e-success e-small e-round";
    }

    private void contractEnd(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        cssClass = "e-success e-small";
    }
}
